import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:freedom/page/game_index.dart';
import 'package:freedom/page/mahjong/bloc/room_info.dart';
import 'package:freedom/page/mahjong/bloc/user_state.dart';
import 'package:freedom/util/bottom_clipper.dart';
import 'package:freedom/util/date_util.dart';
import 'package:freedom/util/image_util.dart';
import 'package:freedom/util/navigator_provider.dart';

class Settlement extends StatefulWidget {
  final GameInfo? gameInfo;
  const Settlement(this.gameInfo, {super.key});
  @override
  _SettlementState createState() => _SettlementState();
}

class _SettlementState extends State<Settlement> {
  GlobalKey globalKey = GlobalKey();
  double bodyWidth = ScreenUtil().screenHeight;
  double bodyHeight = ScreenUtil().screenHeight * 7 / 8;
  GameInfo? _gameInfo;

  @override
  void initState() {
    super.initState();
    _gameInfo = widget.gameInfo;
  }

  @override
  Widget build(BuildContext context) {
    if (_gameInfo == null) {
      return const SizedBox();
    }
    return Align(
        alignment: Alignment.center,
        child: Material(
            color: Colors.transparent,
            child: RepaintBoundary(
              key: globalKey,
              child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5.5.r),
                  ),
                  width: bodyWidth,
                  height: bodyHeight,
                  child: Stack(
                    children: [
                      Positioned(
                        top: 20.h,
                        left: 0,
                        bottom: 0,
                        child: Container(
                          padding: EdgeInsets.symmetric(horizontal: 10.w),
                          height: bodyHeight,
                          width: bodyWidth,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(5.5),
                              boxShadow: const [
                                BoxShadow(
                                  color: Colors.black,
                                  offset: Offset(10.00, 10.00),
                                  blurRadius: 10.0,
                                ),
                              ]),
                        ),
                      ),
                      Positioned(
                          top: 20.h,
                          left: 0,
                          bottom: 0,
                          child: ClipPath(
                              //路径裁切组件
                              clipper: BottomClipper(), //路径
                              child: Container(
                                padding: EdgeInsets.symmetric(horizontal: 5.w),
                                height: bodyHeight - 20.h,
                                width: bodyWidth,
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(5.5),
                                    color: Colors.white,
                                    boxShadow: const [
                                      BoxShadow(
                                        color: Colors.red,
                                        offset: Offset(100, 100),
                                        blurRadius: 100.0,
                                      ),
                                    ]),
                                child: SingleChildScrollView(
                                    child: Column(children: [
                                  SizedBox(
                                    height: 20.h,
                                  ),
                                  Container(
                                    width: double.infinity,
                                    color: Colors.blue[100]!.withOpacity(0.5),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Text(_gameInfo?.name ?? "",
                                            style: TextStyle(
                                                color: Colors.grey.shade600,
                                                fontSize: 13.h,
                                                height: 1.0)),
                                        Text(
                                          "房间号:${_gameInfo?.code ?? ""}",
                                          style: TextStyle(
                                              color: Colors.grey.shade600,
                                              fontSize: 13.h,
                                              height: 1.0),
                                        ),
                                        Text(
                                          "结束时间:${DateUtil.getTime(format: 'yyyy-MM-dd HH:mm')}",
                                          style: TextStyle(
                                              color: Colors.grey.shade600,
                                              fontSize: 13.h,
                                              height: 1.0),
                                        )
                                      ],
                                    ),
                                  ),
                                  SizedBox(
                                    height: ScreenUtil().setHeight(10),
                                  ),
                                  Column(
                                      children: _gameInfo?.allUser
                                              ?.map((e) => buildUserBillItem(
                                                  userInfo: e))
                                              .toList() ??
                                          []),
                                  Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceEvenly,
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    children: [
                                      SizedBox(
                                          width: bodyWidth / 4,
                                          height: bodyHeight / 10,
                                          child: TextButton(
                                            style: ButtonStyle(
                                                backgroundColor:
                                                    MaterialStateProperty.all<Color>(
                                                        const Color.fromARGB(
                                                            255,
                                                            178,
                                                            214,
                                                            243)), // 设置背景颜色
                                                padding: MaterialStateProperty.all<
                                                        EdgeInsets>(
                                                    EdgeInsets.zero), // 设置内边距为零
                                                /*        minimumSize: MaterialStateProperty
                                                  .all<Size>(Size(44, 30)), */
                                                tapTargetSize:
                                                    MaterialTapTargetSize
                                                        .shrinkWrap,
                                                alignment: Alignment.center,
                                                shape: MaterialStateProperty.all<
                                                    RoundedRectangleBorder>(
                                                  RoundedRectangleBorder(
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                            10.r), // 设置圆角半径
                                                  ),
                                                ),
                                                side:
                                                    MaterialStateProperty.all<BorderSide>(
                                                  const BorderSide(
                                                      width: 1.0,
                                                      color: Colors
                                                          .white), // 设置边框宽度和颜色
                                                )),
                                            onPressed: () {
                                              ImageUtil.saveWidgetImage(
                                                  globalKey);
                                            },
                                            child: Text(
                                              "存至相册",
                                              style: TextStyle(
                                                  fontSize: 15.h, height: 1.0),
                                            ),
                                          )),
                                      SizedBox(
                                          width: bodyWidth / 4,
                                          height: 30.h,
                                          child: TextButton(
                                            style: ButtonStyle(
                                                backgroundColor:
                                                    MaterialStateProperty.all<Color>(
                                                        const Color.fromARGB(
                                                            255,
                                                            178,
                                                            214,
                                                            243)), // 设置背景颜色
                                                padding: MaterialStateProperty.all<
                                                        EdgeInsets>(
                                                    EdgeInsets.zero), // 设置内边距为零
                                                /*        minimumSize: MaterialStateProperty
                                                  .all<Size>(Size(44, 30)), */
                                                tapTargetSize:
                                                    MaterialTapTargetSize
                                                        .shrinkWrap,
                                                alignment: Alignment.center,
                                                shape: MaterialStateProperty.all<
                                                    RoundedRectangleBorder>(
                                                  RoundedRectangleBorder(
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                            10.r), // 设置圆角半径
                                                  ),
                                                ),
                                                side:
                                                    MaterialStateProperty.all<BorderSide>(
                                                  const BorderSide(
                                                      width: 1.0,
                                                      color: Colors
                                                          .white), // 设置边框宽度和颜色
                                                )),
                                            onPressed: () {
                                              NavigatorProvider
                                                  .pushAndRemoveUntil(
                                                      GameIndex());
                                            },
                                            child: Text(
                                              "游戏结束",
                                              style: TextStyle(
                                                  fontSize: 15.h, height: 1.0),
                                            ),
                                          )),
                                    ],
                                  ),
                                  SizedBox(
                                    height: ScreenUtil().setHeight(20),
                                  ),
                                  Container(
                                      height: bodyHeight / 5,
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceEvenly,
                                        children: [
                                          Center(
                                            child: Text(
                                              "禁止赌博\n此结果仅供娱乐参考\n(本平台不提供任何充值通道)",
                                              textAlign: TextAlign.center,
                                              style: TextStyle(
                                                  color: Colors.black,
                                                  fontSize: 12.h),
                                            ),
                                          ),
                                          Text(
                                            "--欢迎下载--\n--逍遥棋牌--",
                                            textAlign: TextAlign.center,
                                            style: TextStyle(
                                                color: Colors.black,
                                                fontSize: 12.h),
                                          ),
                                          Container(
                                              padding: EdgeInsets.symmetric(
                                                  vertical: ScreenUtil()
                                                      .setHeight(10)),
                                              child: Image.asset(
                                                "assets/images/logo/dow_qr.png",
                                                fit: BoxFit.cover,
                                              )),
                                        ],
                                      )),
                                ])),
                              ))),
                      Align(
                          alignment: Alignment(0, -1),
                          child: Container(
                              width: 100.w,
                              height: 30.h,
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                  color: Colors.blue[300],
                                  borderRadius: BorderRadius.circular(
                                      ScreenUtil().setWidth(10))),
                              child: Text(
                                "游戏结算",
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 15.h,
                                    fontWeight: FontWeight.w600),
                              ))),
                    ],
                  )),
            )));
  }

  Container buildUserBillItem(
      {Color? backgroundColor, required UserState userInfo}) {
    backgroundColor = backgroundColor ?? Color.fromARGB(255, 245, 233, 209);
    return Container(
      height: 40.h,
      decoration: BoxDecoration(
          color: backgroundColor, borderRadius: BorderRadius.circular(2.2)),
      margin: EdgeInsets.only(bottom: bodyHeight / 9 / 7),
      child: Row(
        children: [
          Expanded(
            flex: 3,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                ClipRRect(
                    borderRadius: BorderRadius.circular(2.2),
                    child: userInfo.portraitUrl == null
                        ? Image.asset(
                            "assets/images/mahjong/user/header/common_header.png",
                            fit: BoxFit.cover,
                          )
                        : CachedNetworkImage(
                            fit: BoxFit.cover,
                            height: 40.h,
                            width: 40.h,
                            placeholder: (context, url) =>
                                CircularProgressIndicator(),
                            errorWidget: (context, url, error) =>
                                Icon(Icons.error),
                            imageUrl: userInfo.portraitUrl!,
                          )),
                SizedBox(
                  width: ScreenUtil().setWidth(5),
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "昵称:${userInfo.username!}",
                      style: TextStyle(fontSize: 13.h, height: 1.0),
                    ),
                    Text(
                      "ID:${userInfo.userId}",
                      style: TextStyle(fontSize: 10.h, height: 1.0),
                    )
                  ],
                )
              ],
            ),
          ),
          Expanded(
            flex: 3,
            child: Text(
              '胡牌次数：${userInfo.winNumber}',
              style: TextStyle(fontSize: 12.h, height: 1.0),
            ),
          ),
          Expanded(
              flex: 1,
              child: Text(
                '${userInfo.score}分',
                style: TextStyle(
                    color: userInfo.score < 0 ? Colors.red : Colors.orange,
                    fontSize: 12.h,
                    height: 1.0,
                    fontWeight: FontWeight.w500),
              )),
        ],
      ),
    );
  }
}
